<template>
  <view>
    <!-- <view
      style="
        background-image: url('/static/user-center/bg.png');
        height: 442rpx;
        background-size: 100% 100%;
      "
    >
      <view
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: calc(var(--status-bar-height) + 24rpx) 32rpx 0 34rpx;
        "
      >
        <image
          class="cuIcon cuIcon-back"
          style="width: 16px; height: 16px; color: #fff"
          @tap="goBack"
        ></image>
        <WatchButton
          v-if="edit"
          :componentStyle="{
            borderRadius: '43rpx',
            fontWeight: '500',
            height: '64rpx',
            width: '128rpx',
            fontSize: '28rpx',
            color: '#000',
          }"
          text="保存"
          @click="nick_confirm"
          bgColor="linear-gradient(90deg, #90FCED 0%, #76CEFB 100%)"
        ></WatchButton>
      </view>
    </view> -->
    <u-navbar
      title="个人资料"
      bgColor="transparent"
      :fixed="false"
      :autoBack="true"
      :rightText="edit?'保存':''"
      @rightClick="nick_confirm"
    >
    </u-navbar>
    <view style="padding: 0 24rpx; margin-top: 68rpx">
      <view style="display: flex; width: 100%; justify-content: center">
        <view class="avatar" @click="avatar_click">
          <image
            :src="userInfo.picx"
            style="width: 100%; height: 100%; border-radius: 50%"
          ></image>
        </view>
      </view>

      <view
        style="
          margin: 0 auto;
          display: flex;
          color: #333;
          font-size: 30rpx;
          align-items: center;
          height: 120rpx;
          margin-top: 30rpx;
          border-bottom: 1px solid #f5f5f5;
        "
      >
        <text>昵称 </text>
        <text v-if="!edit" style="font-size: 28rpx; margin-left: 72rpx">{{
          userInfo.nichen || userInfo.name
        }}</text>
        <u-input
          v-model="userInfo.nichen"
          style="margin-left: 72rpx; border: none; padding: 0"
          v-else
        ></u-input>
      </view>
      <!-- <view
        style="
          margin: 0 auto;
          display: flex;
          color: #333;
          font-size: 30rpx;
          align-items: center;
          height: 120rpx;
          border-bottom: 1px solid #f5f5f5;
        "
      >
        <text
          >姓别<text style="font-size: 28rpx; margin-left: 72rpx">{{
            userInfo.nichen || userInfo.name
          }}</text></text
        >
      </view> -->
      <view
        style="
          margin: 0 auto;
          display: flex;
          color: #333;
          font-size: 30rpx;
          align-items: center;
          height: 120rpx;
          border-bottom: 1px solid #f5f5f5;
        "
      >
        <text
          >账号<text style="font-size: 28rpx; margin-left: 72rpx">{{
            userInfo.name
          }}</text></text
        >
      </view>
      <!-- <view
        style="
          margin: 0 auto;
          display: flex;
          color: #333;
          font-size: 30rpx;
          align-items: center;
          height: 120rpx;
          border-bottom: 1px solid #f5f5f5;
        "
      >
        <text
          >简介<text style="font-size: 28rpx; margin-left: 72rpx">{{
            userInfo.nichen || userInfo.name
          }}</text></text
        >
      </view> -->
    </view>

    <!-- <view class="avatar" style="margin-bottom: 28rpx;margin-top: 56rpx;" @click="avatar_click">
			<image :src="userInfo.picx" style="width: 100%;height: 100%;border-radius: 50%;"></image>
		</view>
		<view style="margin: 0 auto;display: flex;justify-content: center;line-height: 56rpx;color: #2d3135;font-size: 36rpx;font-weight: 500;">
			<text>{{userInfo.nichen || userInfo.name}}</text>
		</view>
		<view style="background: #fff;margin: 76rpx 30rpx 0;">
			<view class="box">
				<view style="color: #525252;width: 160rpx;font-size:30rpx;">
					<text>ID</text>
				</view>
				<view style="height: 108rpx;line-height: 108rpx;text-align: right;width: calc(100% - 160rpx);">
					<text>{{(userInfo.id-0) + 10000}}</text>
				</view>
			</view>
			<view class="box">
				<view style="color: #525252;width: 160rpx;font-size:30rpx;">
					<text>账号</text>
				</view>
				<view style="height: 108rpx;line-height: 108rpx;text-align: right;width: calc(100% - 160rpx);">
					<text>{{userInfo.name}}</text>
				</view>
			</view>
			<view class="box">
				<view style="color: #525252;width: 160rpx;font-size:30rpx;">
					<text>昵称</text>
				</view>
				<view style="height: 108rpx;line-height: 108rpx;text-align: right;width: calc(100% - 160rpx);display: flex;justify-content: flex-end;" @click="rename()">
					<text v-if="userInfo.nichen">{{userInfo.nichen}}</text>
					<text v-else style="color: gray;">请输入新昵称</text>
					<u-icon color="#606266" name="arrow-right" size="28rpx"></u-icon>
				</view>
			</view>
		</view> -->

    <kx-modal
      ref="renameModal"
      modalTitle="请输入新昵称"
      placeholder="请输入新昵称"
      @onClickCancel="cancel"
      @onClickConfirm="nick_confirm"
    ></kx-modal>
    <!-- <kx-modal ref="repwdModal" modalTitle="请输入新密码" placeholder="请输入新密码" @onClickCancel="cancel" @onClickConfirm="pass_confirm"></kx-modal> -->
  </view>
</template>

<script>
import kxmodal from "../../../components/kx-modal/kx-modal.vue";
import WatchButton from "../../../components/watch-login/watch-button.vue";
import w_md5 from "../../../js_sdk/zww-md5/w_md5.js";
export default {
  components: {
    kxmodal,
    w_md5,
    WatchButton,
  },
  data() {
    return {
      userInfo: {},
      app_key: "",
      edit: false,
    };
  },
  onShow() {
    this.get_userinfo();
  },
  onLoad(option) {
    if (option.edit) {
      this.edit = true;
    }
  },
  methods: {
    cancel(e) {
      console.log(e);
    },
    // 修改昵称
    rename() {
      this.$refs["renameModal"].showModal();
    },
    // 提交修改昵称
    nick_confirm() {
      if (!this.edit) return;
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&nichen=" +
        this.userInfo.nichen +
        "&timestamp=" +
        time +
        "&type=nichen&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/user/edit?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("昵称修改结果：", res.data);
          if (res.data.code == 1) {
            uni.showToast({
              icon: "none",
              title: res.data.msg,
            });
            this.get_userinfo();
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.msg,
            });
          }
        },
      });
    },
    // 选择头像
    avatar_click() {
      uni.chooseImage({
        count: 1, //图片可选择数量
        sizeType: ["original"], //original 原图，compressed 压缩图，默认二者都有
        sourceType: ["album", "camera"], //album 从相册选图，camera 使用相机，默认二者都有。
        crop: {
          //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
          width: 100,
          height: 100,
        },
        success: (res) => {
          let imgFiles = res.tempFilePaths; //图片的本地文件路径列表
          this.uppic(imgFiles);
        },
      });
    },
    // 获取用户信息
    get_userinfo() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/user/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("用户信息：", res.data);
          this.userInfo = res.data.user;
        },
      });
    },
    // 上传头像
    uppic(img) {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      console.log(img);
      uni.uploadFile({
        url: getApp().globalData.websiteUrl + "/index.php/appv1/user/uppic", //仅为示例，非真实的接口地址
        filePath: img[0],
        name: "file",
        formData: {
          deviceid: getApp().globalData.deviceid,
          facility: getApp().globalData.facility,
          timestamp: time,
          user_id: uni.getStorageSync("user").uid,
          user_token: uni.getStorageSync("user").utoken,
          sign: sign,
        },
        success: (uploadFileRes) => {
          console.log(uploadFileRes.data);
          uni.showToast({
            icon: "none",
            position: "bottom",
            title: "头像修改成功",
          });
          this.get_userinfo();
        },
      });
    },
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style>
/* page{
		background: linear-gradient(0deg,#fff 80%,#f5f6fa);
	} */
@import url("../../../components/watch-login/css/icon.css");

.avatar {
  background: #fff;
  border-radius: 50%;
  height: 158rpx;
  padding: 10rpx;
  position: relative;
  text-align: center;
  width: 158rpx;
}
.box {
  border-bottom: 1px solid #ededed;
  color: #2d3135;
  display: flex;
  font-size: 28rpx;
  font-weight: 400;
  justify-content: space-between;
  line-height: 108rpx;
  margin: 0 10rpx;
}
</style>
